<template>
  <div class="page-class">
    <Breadcrumb> </Breadcrumb>
    <div class="cnt-class">
      <div class="query">
        <a-row>
          <a-col :span="6">
            <a-input-search
              v-model.trim="queryName"
              :maxLength="50"
              allowClear
              placeholder="请输入昵称/姓名/手机号/身份证号"
              @search="onSearch"
            >
              <a-button slot="enterButton" type="primary"> 搜索 </a-button>
            </a-input-search>
          </a-col>
        </a-row>
      </div>
      <a-tabs
        class="tabs-row"
        v-model="activeKey"
        size="large"
        :animated="false"
        @change="onChangeTab"
      >
        <a-tab-pane key="1" tab="已审批">
          <div class="table">
            <BaseTable
              ref="table"
              rowKey="id"
              :scroll="{ y: 500 }"
              :loading="loading"
              :columns="columns"
              :dataSource="list"
              :hideSelect="false"
              :selectedRowKeys="selectedRowKeys"
              @deleteRows="handleDelete"
              @selectChange="selectChange"
              @change="getList"
            ></BaseTable>
          </div>
        </a-tab-pane>
        <a-tab-pane key="2" tab="待审批">
          <div class="table">
            <BaseTable
              ref="table2"
              rowKey="id"
              :scroll="{ y: 500 }"
              :loading="loading"
              :columns="columns2"
              :dataSource="list2"
              :hideSelect="false"
              :selectedRowKeys="selectedRowKeys"
              @deleteRows="handleDelete"
              @selectChange="selectChange"
              @change="getList"
            ></BaseTable>
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
    <!-- 查看房产 -->
    <Show :visible="visible" :data="rows" @close="handleClose"></Show>
  </div>
</template>
<script>
import BaseTable from "@/components/BaseTable";
import ClipseImg from "@/components/ClipseImg/Index.vue";
import httpApi from "@/api/account";
import Show from "./components/Show";

export default {
  components: {
    BaseTable,
    Show
  },
  data() {
    return {
      loading: false,
      activeKey: "1",
      list: [],
      list2: [],
      time: -1,
      visible: false,
      rows: [],
      passReason: "",
      queryName: undefined,
      selectedRowKeys: [],
      columns: [
        {
          title: "姓名",
          dataIndex: "userName"
        },
        {
          title: "手机号",
          dataIndex: "mobile"
        },
        {
          title: "身份证号",
          dataIndex: "idcard"
        },
        {
          title: "昵称",
          dataIndex: "nice"
        },
        {
          title: "小区",
          dataIndex: "mofdsfsbile"
        },
        {
          title: "房产",
          dataIndex: "dfdfd",
          customRender: (data = 0) => {
            return data + "个";
          }
        },
        {
          title: "操作",
          eclipse: true,
          customRender: (v, row) => {
            return (
              <div class="operate-td">
                <a onClick={() => this.handleShow(row)}>查看房产</a>
                <div v-auth="owner.delete">
                  <a-divider type="vertical" />
                  <a onClick={() => this.handleDelete(row)}>删除</a>
                </div>
              </div>
            );
          }
        }
      ],
      columns2: [
        {
          title: "姓名",
          dataIndex: "userName"
        },
        {
          title: "手机号",
          dataIndex: "mobile"
        },
        {
          title: "身份证号",
          dataIndex: "idCard"
        },
        {
          title: "昵称",
          dataIndex: "userNo"
        },
        {
          title: "小区",
          dataIndex: "house"
        },
        {
          title: "楼栋号",
          dataIndex: "hodf"
        },
        {
          title: "门牌号",
          dataIndex: "fdsfsf"
        },
        {
          title: "产权面积",
          dataIndex: "mj",
          customRender: (data = 0) => {
            return data + "㎡";
          }
        },
        {
          title: "截图",
          dataIndex: "image",
          customRender: (image = "") => {
            return <ClipseImg image={image}></ClipseImg>;
          }
        },
        {
          title: "操作",
          eclipse: true,
          customRender: (v, row) => {
            return (
              <div class="operate-td" v-auth="owner.check">
                <a onClick={() => this.handleCheck(row, 1)}>通过</a>
                <a-divider type="vertical" />
                <a onClick={() => this.handleCheck(row, 0)}>不通过</a>
              </div>
            );
          }
        }
      ]
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    onChangeTab(index) {
      this.activeKey = index;
      this.selectedRowKeys = [];
      this.getList(1);
    },
    onSearch() {
      clearTimeout(this.time);
      this.time = setTimeout(() => {
        this.getList(1);
      }, 600);
    },
    getList(current) {
      this.loading = true;
      if (current === 1) {
        this.$refs.table.pageInfo.current = 1;
      }
      httpApi
        .getList({
          queryName: this.queryName,
          pageNo: this.$refs.table.pageInfo.current,
          pageSize: this.$refs.table.pageInfo.pageSize
        })
        .then((res) => {
          if (res.retcode === 0) {
            if (this.activeKey === "1") {
              this.list = res.data.records || [];
              if (this.$refs.table) {
                this.$refs.table.pageInfo.total = res.data.total;
              }
            } else {
              this.list2 = res.data.records || [];
              if (this.$refs.table2) {
                this.$refs.table2.pageInfo.total = res.data.total;
              }
            }
          } else {
            this.$message.error(res.msg);
          }
          this.loading = false;
        })
        .catch((err) => {
          this.$message.error(err.msg);
          this.loading = false;
        });
    },
    handleShow(row) {
      this.visible = true;
      this.rows = [row];
    },
    handleClose(show) {
      this.visible = show;
      this.row = {};
    },
    changePassReason(event) {
      this.passReason = event.target.value;
    },
    handleCheck(row, type) {
      //通过 不通过
      console.log(row, type);
      let title = "";
      let content = "";
      if (type === 1) {
        title = "审批通过：";
        content = "请核实房产和业主信息，确认审批通过？";
      } else {
        title = "审批不通过：";
        content = () => {
          return (
            <div>
              <span>请核实房产和业主信息，确认审批不通过？</span>
              <div class="passReason">
                <a-input
                  placeholder="请输入原因"
                  maxLength={100}
                  onChange={(e) => this.changePassReason(e)}
                ></a-input>
              </div>
            </div>
          );
        };
      }

      this.$confirm({
        title,
        content,
        onOk: () => {
          debugger;
          console.log(this.passReason);
          httpApi
            .deleteRows()
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("操作成功！");
                this.passReason = "";
                this.getList();
              } else {
                this.$message.error(res.msg || "操作失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "操作失败！");
            });
        },
        onCancel: () => {
          this.passReason = "";
          console.log("已取消操作");
        }
      });
    },
    handleDelete(row) {
      let title = "";
      let content = "";
      let ids = [];
      if (row) {
        ids = [row.id];
        title = "删除：";
        content = "是否删除该业主，删除操作将解绑全部房产？";
      } else {
        ids = this.selectedRowKeys;
        title = "批量删除：";
        content = `是否删除已选中的 ${ids.length} 个业主，删除操作将解绑全部房产？`;
      }

      this.$confirm({
        title,
        content,
        onOk: () => {
          httpApi
            .deleteRows(ids)
            .then((res) => {
              if (res.retcode === 0) {
                this.$message.success("删除成功！");
                this.getList();
              } else {
                this.$message.error(res.msg || "删除失败！");
              }
            })
            .catch((err) => {
              this.$message.error(err.msg || "删除失败！");
            });
        },
        onCancel: () => {
          console.log("已取消删除操作");
        }
      });
    },
    selectChange(selectedKeys) {
      this.selectedRowKeys = selectedKeys;
    }
  }
};
</script>
<style scoped lang="less">
.pwd-msg {
  .font-Medium(14px,rgba(0, 0, 0, 0.65),22px,400);
}
.pwd-tip {
  .font-Medium(14px,rgba(0, 0, 0, 0.35),18px,400);
}
.passReason {
  margin-top: 12px;
}
</style>
